<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no;" /> 
    <link href="Content/bootstrap.css" rel="stylesheet"/>
	<link href="content/font-awesome.css" rel="stylesheet" />
    <link href="Content/base.css" rel="stylesheet"/>
    <link href="Content/animate.css" rel="stylesheet"/>
</head>
<body>
    <div class="loading-fixed">
		<div class="loading-text" id="loading-text"></div>
		<div class="sk-wave">
			<div class="sk-rect sk-rect1"></div>
			<div class="sk-rect sk-rect2"></div>
			<div class="sk-rect sk-rect3"></div>
			<div class="sk-rect sk-rect4"></div>
		</div>
    </div>
    <div id="app">
        <div class="msg-fixed">     
            <div class="msg-container">
                <div class="msg-head">
                    <img v-show="popMsg.level==='suc'" src="images/msg-suc.png" alt="" />
                    <img v-show="popMsg.level==='err'" src="images/msg-err.png" alt="" />
                    <img v-show="popMsg.level==='ask'" src="images/msg-ask.png" alt="" />
                    <span :class="popMsgColor">{{popMsg.msg}}</span>
                </div>
                <div class="msg-btn-container">
                    <a @click="popHandle('cancel')" v-show="popMsg.type==='confirm'"  class="btn btn-grey" style="margin-right:46px;">取消</a>
                    <a @click="popHandle('ok')" v-show="popMsg.type==='alert'||popMsg.type==='confirm'" class="btn btn-blue">确认</a>
                </div>
            </div>
        </div> 
        <img v-show="page!=='code'" src="images/back.png" class="btn-back" @click="this.code='';goPage('code')"> 
        <div id="center" v-show="page==='code'">  
            <img class="btn-left" @click="goPage('cardReading')" src="images/VIP1.png" alt="" />
            <img class="btn-right" @click="goPage('intro')" src="images/VIP2.png" alt="" />
        </div>
        <!-- 刷手环 -->
        <div class="card-reading" v-show="page==='cardReading'"> 
            <img src="images/iccard.png" class="iccard" alt="">
            <h3>请将手环靠近读卡区</h3>
            <!-- <button @click="this.code='2511976050';goPage('order')">测试接收到数据</button>  -->
        </div>
		<!-- 手环结果 -->
		<div class="order-detail" v-show="page==='order'">  
            
           
            <h3 v-show="hasVip===1">已购买VIP区门票</h3>
			<div class="order-current" v-show="hasVip===1"> 
                <div class="title">
                    <!-- 项目名称 -->
                    <div class="product-name-title">手环编号</div>
                    <!-- 套餐 -->
                    <div class="product-param-title">状态</div> 
                    <!-- 套餐 -->
                    <div class="product-price-title">购买时间</div> 
                </div>
                <div class="info">
                    <!-- 项目名称 -->
                    <div class="product-name">{{code}}</div>
                    <!-- 套餐 -->
                    <div class="product-param">{{order_status}}</div> 
                    <!-- 套餐 -->
                    <div class="product-price">{{order_time}}</div> 
                </div>
            </div> 
            
            <div class="diff-price" v-show="hasVip===0">
                VIP区价格：{{product_price}}
            </div>
            <div class="pay" v-show="hasVip===0">

                <!-- 微信支付 -->
                <a href="###" class="btn-pay btn-wepay" @click="wepay()">
                        <img src="images/wepay.png" alt="">
                </a>
                
                <!-- 支付宝支付 -->
                <a href="###" class="btn-pay btn-alipay" @click="alipay()">
                        <img src="images/alipay.png" alt="">
                </a> 
            </div>
        </div> 
        <div class="scan-pay" v-show="page==='pay'">  
            <img src="images/barcode_scan.png" alt="">
        </div>
        <div class="result result-waiting" v-show="page==='paywait'" style="background: url(images/suc.png) no-repeat">
        
            <h3>等待支付结果返回</h3>
            <p>请不要重复扫码！</p>
        </div>
        <div class="result result-success" v-show="page==='suc'" style="background: url(images/suc.png) no-repeat"> 
            <h3>恭喜您，支付成功，小票正在打印:)</h3>
            <p>请从下方取票口取走打印的小票，手环信息已更新，可以直接刷手环进入VIP区域，祝您游玩愉快！</p>
        </div>
        <div class="result result-fail"  v-show="page==='err'">
            <img src="images/err.png" alt="" />
            <h3>对不起，支付失败，请返回重试:(</h3>
            <p>确认您的微信或支付宝是否已经扣款，如已扣款，请返回查询手环信息是否已经更新，如未更新请联系工作人员!</p>
        </div> 
        <div style="width: 100%;line-height: 3em;font-size: 16px;color: azure;position: absolute;text-align: center;bottom: 20px;">技术支持 @小泥人</div>
        <a style="position:absolute;bottom:25px;left:25px;display: block;width: 10px;height: 10px;" @click="showDevTools"></a>
    </div>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/vue.js"></script>
    <script src="Scripts/base.js"></script>
    <script>
        (function () {
            window.vm = new Vue({
                el: '#app',
                data: {
                    popMsg: {
                        level: 'suc', // err,suc,ask
                        type: 'alert',// alert, confirm
                        msg:'',
                        okHandle: null,
                        cancelHandle:null,
                    },
                    //page: "code", // "code", "barcode", "suc", "err"
                    code:'',
					page: "code", 
                    hasVip:0,
                    //(returnCode, returnMsg, order_status,order_time,product_id,product_price_id,product_price
                    order_status:null,
                    order_time:null,
                    product_id:0,
                    product_price_id:0 ,
                    product_price:0, 
                    auth_code:''
                },
                computed: {
                    popMsgColor: function () {
                        if (this.popMsg.type === 'confirm') {
                            return '';
                        }
                        else if (this.popMsg.type === 'alert' && this.popMsg.level === 'suc') {
                            return 'color-dark-green';
                        } else if (this.popMsg.type === 'alert' && this.popMsg.level === 'err') {
                            return 'color-yellow';
                        }
                    }
                },
                mounted: function () {
                    this.$nextTick(function () {
                        $(document).keyup(function (event) {
                            switch (event.keyCode) {
                                case 27:
                                    host.exit();
                                default:
                                    break;
                            }
                        });
                        if (typeof host !== 'undefined') {
                            host.mounted();
                        }
                    })
                },
                watch:{
                    auth_code:function(data){
                        console.log('paycode:'+data);
                        console.log(this.paytype+'VIP区门票'+this.product_id+'|'+this.product_price+'|'+data+'|'+this.product_price_id+'|'+this.code);
                        if(data.length>0)
                            host.printByCode(this.paytype,'VIP区门票',this.product_id,this.product_price,data,this.product_price_id,this.code);
                    }
                },
                methods: {
                    popShow: function (level, type, msg, ok, cancel) {
                        // 防止重复弹窗冲突
                        if ($('.msg-fixed').hasClass('visible')) {
                            return;
                        }

                        // 设置弹窗信息
                        this.popMsg.level = level;
                        this.popMsg.type = type;
                        this.popMsg.msg = msg;
                        this.popMsg.okHandle = ok;
                        this.popMsg.cancelHandle = cancel;

                        // 弹窗
                        $('.msg-fixed').addClass('visible')
                    },
                    popHandle: function (type) {
                        $('.msg-fixed').removeClass('visible')
                        if (type === 'ok' && this.popMsg.okHandle) {
                            this.popMsg.okHandle();
                            this.popMsg.okHandle = null;
                        } else if (type === 'cancel' && this.popMsg.cancelHandle) {
                            this.popMsg.cancelHandle();
                            this.popMsg.cancelHandle = null;
                        }
                    },
                    showDevTools: function () {
                        host.showDevTools();
                    },
                    goPage: function (page) {
                        if(page!=='code'){
                            this.isHome = false;
                        }else{
                            this.isHome = true;
                        }
                        console.log(page);
                        if (this.page === "barcode" && page === "code") {
                            host.stopScan();
							$('.msg-fixed').removeClass('visible')
                        }

                        this.page = page;

                        if (page === "cardReading") {
							
                            // host.startScan();
                            host.startScanIC();
                            // this.code = '2511976050'
                            console.log('iccard'+this.code)
                            // this.queryCode()
                        }

                        if (page==='order') {
                            
                        }
                        if (page === 'pay'){
                            host.startScan(); 
                        }
                    },
                    test:function(){
                        alert('test');
                    },
                    wepay : function(){
                        this.paytype=2;
                        this.goPage('pay')
                    },
                    alipay : function(){
                        this.paytype=1;
                        this.goPage('pay')
                    },
                    cancelCode: function () {
                        // this.goPage("err")
                    },
                }
            });
        })();
    </script>
</body>
</html>
